<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

	</head>

	<body>
		<div class="container-fluid">
			<ol class="breadcrumb">
				<li>
					<i class="fa fa-home"></i>
					<a fref="index.html">Home</a>
				</li>
				<li>
					<span class="">查看报名信息</span>
				</li>
			</ol>

			<div class="mcomment" id="datailMatchInfo">
				<h3 class="page-header">查看报名信息</h3>
				<!--报名信息搜索-->
				<div class="container-fluid">
					<div class="form-group form-inline">
						<label class="input-group pull-right">
							<span class="input-group-addon">
								<i class="fa fa-search"></i>
							</span>
							<input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索报名信息" />
							<span class="input-group-btn">
								<button class="btn btn-default">搜索</button>
							</span>
						</label>

						<!--类型筛选-->
						<label class="">
							<label for="selectType">类型筛选：</label>
						<select v-model="comId" class="form-control">
							<option v-for="type in types" v-bind:value="type.comId">
								{{type.laName}}
							</option>
						</select>
						</label>
						<label class="">
							<button class="btn btn-default">确定</button>
						</label>
						<label>
							<button class="btn btn-default">导出</button>
					    </label>
						<!--类型筛选结束-->
						<hr />
					</div>
				</div>
				<!--报名信息搜索结束-->

				<div>
					<!--列表及操作-->
					<!--操作-->
					<div>
						<!--列表-->
						<div>
							<table class="table table-bordered table-hover table-responsive ">
								<thead>
									<tr>
										<td>
											<strong>比赛名称</strong>
										</td>
										<td>
											<strong>比赛类型</strong>
										</td>
										<td>
											<strong>发布时间</strong>
										</td>
										<td>
											<strong>发布人</strong>
										</td>
										<td></td>

									</tr>
								</thead>
								<tr v-for="va in matchLists">
									<td>{{va.title}}</td>
									<td>{{va.mode}}</td>
									<td>{{va.releaseTime}}</td>
									<td>{{va.contacts}}</td>

									<td>
										<button @click="see(va.deId)" data-toggle="modal" data-target="#showEnterInfo" class="btn btn-success">查看</button>
										<button @click="getExcel(va.deId)" data-toggle="modal" data-target="#" class="btn btn-success">导出</button>

									</td>
								</tr>
							</table>
						</div>
						<!--列表结束-->

					</div>
					<!--列表及操作结束-->
					<!--分页导航-->
					<center>
						<ul class="pagination ">
							<li>
								<a @click="getajax(1) ">首页</a>
							</li>
							<li>
								<a @click="getajax(page-1) ">上一页</a>
							</li>
							<li>
								<li v-for="value in showpage ">
									<a style="background: red; " @click="getajax(value) " v-if="page==value ">
										{{value}}
									</a>

									<a v-else @click="getajax(value) ">{{value}}</a>

								</li>
							</li>
							<li>
								<a @click="getajax(page+1) ">下一页</a>
							</li>
							<li>
								<a @click="getajax(countpage) ">尾页</a>
							</li>
						</ul>
					</center>
					<!--分页导航结束-->
				</div>

				<!--查看弹出框 start-->
				<div class="modal" id="showEnterInfo">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span>&times;</span>
								</button>
								<h4>比赛详情</h4>
							</div>

							<div class="modal-body">
								<table class="table table-bordered">

									<tr>
										<td><label>比赛名称:</label></td>
										<td><input v-model="see1.title"  class="form-control " type="text" readonly="readonly" /></td>
									</tr>
									<tr>
										<td><label>主办单位:</label></td>
										<td><input v-model="see1.coName" class="form-control " type="text" readonly="readonly" /></td>
									</tr>
									<tr>
										<td><label>比赛类型:</label></td>
										<td><input v-model="see1.mode" class="form-control " type="text" readonly="readonly" /></td>
									</tr>
									<tr>
										<td><label>发布时间:</label></td>
										<td><input v-model="see1.releaseTime" class="form-control " type="text" readonly="readonly" /></td>
									</tr>
									<tr>
										<td><label>发布人:</label></td>
										<td><input v-model="see1.contacts" class="form-control " type="text" readonly="readonly" /></td>
									</tr>

									<tr>
										<td><label>联系电话:</label></td>
										<td><input v-model="see1.phone" class="form-control " type="text" readonly="readonly" /></td>
									</tr>

								</table>
							</div>
							<div class="modal-footer">
								<button @click="getExcel(see1.deId)" data-toggle="modal" data-target="#" class="btn btn-success">导出</button>
								<button class="btn btn-primary" data-dismiss="modal">确定</button>
							</div>
						</div>
					</div>
				</div>

				<!--查看弹出框 end-->

			</div>



			<script type="text/javascript">



				var url1 = 'http://donting.free.idcfengye.com';
				function getExcel(deId){
					//window.location = url1+"/file/download?deId="+deId;
					window.open(url1+"/file/download?deId="+deId);
				}
				var da = new Vue({
					el: '#datailMatchInfo',
					data: {
						count: '', //总记录数
						countpage: '10', //总页数
						page: '', //当前页
						showpage: [],
						coId: '1',
						collegelist: [],
						comId: '1',
						types: [],
						mode: '',
						matchLists: [],
						searchBox: '',
						see1:{},
					},
					methods: {

						getajax: function(page) {
							if(page <= 0) {
								alert("没有上一页");
								return;
							}
							if(page > this.countpage) {
								alert("没有下一页了");
								return;
							}
							axios.defaults.withCredentials = true;

							axios.get(url1 + '/details/findAllPage', {
								params: {
									'page': page
								}
							}).then(function(response) {
								var rs = response.data;
								if(rs.code !=200) {
									alert("无数据");
									return;
								}
								da.countpage = rs.countpage;
								da.page = rs.page;
								da.count = rs.count;
								da.matchLists = rs.data;

								var cout = 0;
								var pa = [];
								if (rs.page <= 3) {

									for (var i = 1; i <= da.countpage && cout < 5; i++) {
										pa.push(i);
										cout++;
									}

								} else {

									if (rs.countpage - rs.page >= 2) {
										pa.push(rs.page - 2);
										pa.push(rs.page - 1);
										pa.push(rs.page);
										pa.push(rs.page + 1);
										pa.push(rs.page + 2);
									} else {
										pa.push(rs.countpage - 4);
										pa.push(rs.countpage - 3);
										pa.push(rs.countpage - 2);
										pa.push(rs.countpage - 1);
										pa.push(rs.countpage);

									}

								}
								da.showpage = pa;

							}).catch(function(error) {　　
								console.log("all连接超时！");
							});

						},
						getcollege: function() {
							axios.defaults.withCredentials = true;

							axios.get(url1 + '/college/all', {　

							}).then(function(response) {
								var rs = response.data;
								da.collegelist = rs.data;
								da.coId = rs.data[0].coId;

								if(rs.code == 200) {

								} else {
									console.log("查看失败!");
								}

							}).catch(function(error) {　　
								console.log("学院连接超时！" + error);
							});
						},
						see: function(id) {

							for(var i = 0; i < da.matchLists.length; i++) {
								if(id == da.matchLists[i].deId) {

									da.see1 = da.matchLists[i];
									console.log(da.see1.deId)
									return;
								}
							}
							console.log(id)
						},



					},
					mounted() {
						this.getajax(1);
						GetType(this);

					}

				})
			</script>

	</body>

</html>